<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<BackButton />
					<h1 class="mdc-top-app-bar__title">商家详情</h1>
				</section>
			</div>
		</header>

		<!-- 商家头部卡片 -->
		<div class="business-header-card">
			<div class="business-logo-container">
				<img :src="getImg(business.businessImg)" @error="handleImageError" class="business-logo">
			</div>
			<div class="business-info-container">
				<div class="business-name-row">
					<h1 class="business-name">{{business.businessName}}</h1>
					<div class="action-buttons">
						<button class="favorite-btn" :class="{ active: isFavorite }" @click="toggleFavorite">
							<i class="material-icons">{{ isFavorite ? 'favorite' : 'favorite_border' }}</i>
						</button>
						<button @click="toRemark(businessId)" class="review-btn">
							<i class="material-icons">rate_review</i>
							<span>评价</span>
						</button>
					</div>
				</div>
				<p class="business-description">{{business.businessExplain}}</p>
				<div class="business-stats">
					<div class="stat-item">
						<i class="material-icons">star</i>
						<span class="stat-label">店铺评分</span>
						<span class="stat-value">{{ avgRating.toFixed(1) }} 分 ({{ totalComments }} 评)</span>
					</div>
					<div class="stat-item">
						<i class="material-icons">local_shipping</i>
						<span class="stat-label">起送价</span>
						<span class="stat-value">¥{{business.starPrice}}</span>
					</div>
					<div class="stat-item">
						<i class="material-icons">delivery_dining</i>
						<span class="stat-label">配送费</span>
						<span class="stat-value">¥{{business.deliveryPrice}}</span>
					</div>
				</div>
			</div>
		</div>

		<!-- 食品列表部分 -->
		<div class="food-section">
			<h2 class="section-title">菜单</h2>
			<div class="food-list">
				<div v-for="(item, index) in foodArr" :key="item.foodId" class="food-card">
					<div class="food-image-container">
						<img :src="getImg(item.foodImg)" @error="handleImageError" class="food-image">
					</div>
					<div class="food-info">
						<h3 class="food-name">{{item.foodName}}</h3>
						<p class="food-description">{{item.foodExplain}}</p>
						<div class="food-footer">
							<span class="food-price">¥{{item.foodPrice}}</span>
							<div class="quantity-control">
								<button v-if="item.quantity > 0" class="qty-btn minus" @click="minus(index)">
									<i class="material-icons">remove</i>
								</button>
								<span v-if="item.quantity > 0" class="qty-display">{{item.quantity}}</span>
								<button class="qty-btn plus" @click="add(index)">
									<i class="material-icons">add</i>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
				
		<!-- 购物车底部栏 -->
		<div class="cart-bottom-bar">
			<div class="cart-info" @click="toggleCart">
				<div class="cart-icon-wrapper" :class="{ 'empty': totalQuantity==0, 'active': totalQuantity>0 }">
					<i class="material-icons">shopping_cart</i>
					<span v-if="totalQuantity > 0" class="cart-badge">{{totalQuantity}}</span>
				</div>
				<div class="cart-text">
					<div class="cart-price">¥{{totalPrice}}</div>
					<div class="cart-tip" v-if="totalPrice < business.starPrice">
						还需 ¥{{roundToDecimalPlace(business.starPrice - totalPrice, 2)}}
					</div>
					<div class="cart-tip" v-else>
						配送费 ¥{{business.deliveryPrice}}
					</div>
				</div>
			</div>
			<button 
				class="checkout-btn" 
				:class="{ 'disabled': totalPrice < business.starPrice }"
				@click="toOrder"
				:disabled="totalPrice < business.starPrice"
			>
				<span v-if="totalPrice < business.starPrice">还需 ¥{{roundToDecimalPlace(business.starPrice - totalPrice, 2)}}</span>
				<span v-else>去结算</span>
			</button>
		</div>

		<!-- 购物车展开列表 -->
		<div class="cart-expanded" v-show="isCartExpanded">
			<div class="cart-expanded-header">
				<h3>已选商品</h3>
				<button class="close-btn" @click="toggleCart">
					<i class="material-icons">close</i>
				</button>
			</div>
			<div class="cart-items-list">
				<div v-for="item in selectedItems" :key="item.foodId" class="cart-item">
					<span class="item-name">{{ item.foodName }}</span>
					<span class="item-qty">×{{ item.quantity }}</span>
					<span class="item-price">¥{{ roundToDecimalPlace(item.foodPrice * item.quantity, 2) }}</span>
				</div>
			</div>
			<div class="cart-expanded-footer">
				<div class="total-row">
					<span>小计</span>
					<span class="total-price">¥{{totalPrice}}</span>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import BackButton from '../components/BackButton.vue';

	export default{
		name:'BusinessInfo',
		data(){
			return {
				businessId: this.$route.query.businessId,
				business:{},
				foodArr:[],
				user:{},
				isCartExpanded: false, // 购物车是否展开
				selectedItems: [],     // 已选商品
				avgRating: 0,
				totalComments: 0,
				isFavorite: false
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			
			// 根据 businessId 查询商家信息
			this.$axios.post('BusinessController/getBusinessById',this.$qs.stringify({
				businessId:this.businessId
			})).then(response=>{
				this.business = response.data;
			}).catch(error=>{
				console.error(error);
			});
			
			// 加载收藏状态
			if(this.user && this.user.userId){
				this.$axios.get('favorites/status',{
					params:{
						userId:this.user.userId,
						businessId:this.businessId
					}
				}).then(resp=>{
					if(resp.data && (resp.data.code===200 || resp.data.code==='200')){
						const result = resp.data.result || {};
						this.isFavorite = !!result.favorite;
					}
				}).catch(err=>{
					console.error('获取收藏状态失败:',err);
				});
			}
			
			// 查询店铺评分信息
			this.$axios.post('CommentController/getBusinessRating', this.$qs.stringify({
				businessId: this.businessId
			})).then(response => {
				if (response.data && response.data.code === '200') {
					const result = response.data.result || {};
					this.avgRating = Number(result.avgRating || 0);
					this.totalComments = Number(result.totalComments || 0);
				}
			}).catch(error => {
				console.error('获取店铺评分失败:', error);
			});
			
			// 根据 businessId 查询所属食品信息
			this.$axios.post('FoodController/listFoodByBusinessId',this.$qs.stringify({
				businessId:this.businessId
			})).then(response=>{
				this.foodArr = response.data;
				for(let i=0;i<this.foodArr.length;i++){
					this.foodArr[i].quantity=0;
				}
				// 如果已登录，加载购物车数量
				if(this.user!=null){
					this.listCart();
				}
			}).catch(error=>{
				console.error(error);
			});
		},
		components:{
			BackButton
		},
		methods:{
			getImg(path){
				if(!path) return this.getDefaultImage();
				// 如果是完整的HTTP URL，直接返回
				if(path.startsWith('http')) return path;
				// 如果是 base64 格式，直接返回
				if(path.startsWith('data:image')) return path;
				// 如果是相对路径（以/开头），拼接服务器地址
				if(path.startsWith('/')) {
					// 如果已经是 /img/ 开头，直接拼接
					if(path.startsWith('/img/')) {
						return 'http://localhost:8888' + path;
					}
					// 如果是其他路径（如 /2024-10-26/xxx.jpg），需要添加 /img 前缀
					return 'http://localhost:8888/img' + path;
				}
				// 其他情况，添加服务器前缀和路径分隔符
				return 'http://localhost:8888/img/' + path;
			},
			getDefaultImage(){
				// 返回一个包含食物emoji的SVG图片
				const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="#f5f5f5" rx="10"/><text x="100" y="100" font-size="80" text-anchor="middle" dominant-baseline="central">🍔</text></svg>';
				return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
			},
			handleImageError(event){
				event.target.src = this.getDefaultImage();
			},
			toRemark(businessId) {
				this.$router.push({ path: '/remark', query: { businessId: businessId } });
			},
			listCart(){
				this.$axios.post('CartController/listCart',this.$qs.stringify({
					businessId:this.businessId,
					userId:this.user.userId
				})).then(response=>{
					let cartArr = response.data;
					// 遍历所有食品列表
					for(let foodItem of this.foodArr){
						foodItem.quantity = 0;
						for(let cartItem of cartArr){
							if(cartItem.foodId==foodItem.foodId){
								foodItem.quantity = cartItem.quantity;
							}
						}
					}
					this.foodArr.sort();
				}).catch(error=>{
					console.error(error);
				});
			},
			add(index){
				// 首先做登录验证
				if(this.user==null || !this.user.userId){
					alert('请先登录！');
					this.$router.push({path:'/login'});
					return;
				}
				if(this.foodArr[index].quantity==0){
					// 做 insert
					this.savaCart(index);
				}else{
					// 做 update
					this.updateCart(index,1);
				}
			},
			minus(index){
				// 首先做登录验证
				if(this.user==null || !this.user.userId){
					alert('请先登录！');
					this.$router.push({path:'/login'});
					return;
				}
				if(this.foodArr[index].quantity>1){
					// 做 update
					this.updateCart(index,-1);
				}else{
					// 做 delete
					this.removeCart(index);
				}
			},
			savaCart(index){
				this.$axios.post('CartController/saveCart',this.$qs.stringify({
					businessId:this.businessId,
					userId:this.user.userId,
					foodId:this.foodArr[index].foodId
				})).then(response=>{
					if(response.data==1){
						// 此食品数量要更新为1
						this.foodArr[index].quantity=1;
						this.foodArr.sort();
					}else{
						alert('向购物车中添加食品失败！');
					}
				}).catch(error=>{
					console.error(error);
				});
			},
			updateCart(index,num){
				this.$axios.post('CartController/updateCart',this.$qs.stringify({
					businessId:this.businessId,
					userId:this.user.userId,
					foodId:this.foodArr[index].foodId,
					quantity:this.foodArr[index].quantity+num
				})).then(response=>{
					if(response.data==1){
						// 此食品数量要更新为1或-1
						this.foodArr[index].quantity+=num;
						this.foodArr.sort();
					}else{
						alert('向购物车中更新食品失败！');
					}
				}).catch(error=>{
					console.error(error);
				});
			},
			removeCart(index){
				this.$axios.post('CartController/removeCart',this.$qs.stringify({
					businessId:this.businessId,
					userId:this.user.userId,
					foodId:this.foodArr[index].foodId
				})).then(response=>{
					if(response.data==1){
						// 此食品数量要更新为0；视图的减号和数量要消失
						this.foodArr[index].quantity=0;
						this.foodArr.sort();
					}else{
						alert('从购物车中删除食品失败！');
					}
				}).catch(error=>{
					console.error(error);
				});
			},
			toOrder(){
				this.$router.push({path:'/orders',query:{
					businessId:this.business.businessId,
					foodArr: JSON.stringify(this.foodArr)
				}});
			},
			roundToDecimalPlace(num, decimalPlaces) {
				const factor = Math.pow(10, decimalPlaces);
				return Math.round(num * factor) / factor;
			},
			toggleCart() {
				this.isCartExpanded = !this.isCartExpanded;
				if (this.isCartExpanded) {
					document.querySelector('.food').style.marginBottom = '40vw'; // 购物车展开时
				} else {
					document.querySelector('.food').style.marginBottom = '14vw'; // 购物车收起时
				}
			},
			// 更新已选商品
			updateSelectedItems() {
				this.selectedItems = this.foodArr.filter(item => item.quantity > 0);
			},
			toggleFavorite(){
				if(!this.user || !this.user.userId){
					this.$toast?.info('请先登录');
					this.$router.push('/login');
					return;
				}
				const isFav = this.isFavorite;
				const url = isFav ? 'favorites/remove' : 'favorites/add';
				this.$axios.post(url,null,{
					params:{
						userId:this.user.userId,
						businessId:this.businessId
					}
				}).then(resp=>{
					if(resp.data && (resp.data.code===200 || resp.data.code==='200')){
						this.isFavorite = !isFav;
						this.$toast?.success(isFav ? '已取消收藏' : '收藏成功');
					}else{
						this.$toast?.error(resp.data.message || '操作失败');
					}
				}).catch(err=>{
					console.error('切换收藏失败:',err);
					this.$toast?.error('操作失败');
				});
			}
		},
		computed:{
			// 食品总价格
			totalPrice(){
				let total = 0;
				for(let item of this.foodArr){
					total += item.foodPrice*item.quantity;
				}
				return this.roundToDecimalPlace(total,2);
			},
			// 食品总数量
			totalQuantity(){
				let quantity = 0;
				for(let item of this.foodArr){
					quantity += item.quantity;
				}
				return quantity;
			},
			// 结算总价格
			totalSettle(){
				return this.roundToDecimalPlace(this.totalPrice+this.business.deliveryPrice,2);
			}
		},
		watch: {
			foodArr: {
				handler() {
					this.updateSelectedItems();
				},
				deep: true  // 深度监听，确保对数组中的每个对象变化进行监听
			}
		}
	}
</script>

<style scoped>
	/* ===== 总容器 ===== */
	.wrapper {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f7fa;
		padding-bottom: 18vw;
	}

	/* ===== 顶部应用栏 ===== */
	.mdc-top-app-bar {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 56px;
		padding: 0 16px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 20px;
		font-weight: 600;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	/* ===== 商家头部卡片 ===== */
	.business-header-card {
		background: white;
		margin: 2vw 3vw;
		margin-bottom: 2vw;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
		display: flex;
		gap: 2.5vw;
		padding: 2.5vw;
	}

	.business-logo-container {
		flex-shrink: 0;
		width: 24vw;
		height: 24vw;
		border-radius: 12px;
		overflow: hidden;
		background: #f0f0f0;
	}

	.business-logo {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.business-info-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-width: 0;
	}

	.business-name-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1.5vw;
		margin-bottom: 1.5vw;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: 1vw;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: 1vw;
	}

	.business-name {
		font-size: 3.8vw;
		font-weight: 700;
		color: #333;
		margin: 0;
		flex: 1;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.review-btn {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border: none;
		padding: 1.5vw 2.5vw;
		border-radius: 6px;
		display: flex;
		align-items: center;
		gap: 0.5vw;
		font-size: 2.5vw;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		flex-shrink: 0;
		white-space: nowrap;
	}

	.review-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
	}

	.review-btn .material-icons {
		font-size: 3vw;
	}

	.favorite-btn {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		color: #ccc;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.favorite-btn .material-icons {
		font-size: 4.4vw;
	}

	.favorite-btn.active {
		color: #ff4d4f;
	}

	.business-description {
		font-size: 3.2vw;
		color: #666;
		margin: 0 0 2vw 0;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.business-stats {
		display: flex;
		gap: 3vw;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1vw;
		flex: 1;
		padding: 2vw;
		background: #f8f9fa;
		border-radius: 8px;
	}

	.stat-item .material-icons {
		font-size: 4vw;
		color: #667eea;
	}

	.stat-label {
		font-size: 2.5vw;
		color: #999;
	}

	.stat-value {
		font-size: 3.5vw;
		font-weight: 700;
		color: #333;
	}

	/* ===== 食品列表部分 ===== */
	.food-section {
		padding: 0 3vw;
	}

	.section-title {
		font-size: 4vw;
		font-weight: 700;
		color: #333;
		margin: 3vw 0 2vw 0;
		padding-left: 1vw;
		border-left: 4px solid #667eea;
	}

	.food-list {
		display: flex;
		flex-direction: column;
		gap: 2vw;
	}

	.food-card {
		background: white;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		display: flex;
		gap: 3vw;
		padding: 2.5vw;
		transition: all 0.3s ease;
	}

	.food-card:active {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transform: translateY(-1px);
	}

	.food-image-container {
		flex-shrink: 0;
		width: 22vw;
		height: 22vw;
		border-radius: 8px;
		overflow: hidden;
		background: #f0f0f0;
	}

	.food-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.food-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.food-name {
		font-size: 3.6vw;
		font-weight: 600;
		color: #333;
		margin: 0 0 1vw 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.food-description {
		font-size: 2.8vw;
		color: #999;
		margin: 0 0 1.5vw 0;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.food-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.food-price {
		font-size: 4vw;
		font-weight: 700;
		color: #667eea;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		gap: 1.5vw;
		background: #f8f9fa;
		padding: 1vw 2vw;
		border-radius: 6px;
	}

	.qty-btn {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
	}

	.qty-btn .material-icons {
		font-size: 4vw;
		color: #667eea;
	}

	.qty-btn:active {
		transform: scale(0.9);
	}

	.qty-display {
		font-size: 3.2vw;
		font-weight: 600;
		color: #333;
		min-width: 3vw;
		text-align: center;
	}

	/* ===== 购物车底部栏 ===== */
	.cart-bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 16vw;
		background: white;
		display: flex;
		align-items: center;
		gap: 2vw;
		padding: 0 3vw;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
		z-index: 99;
	}

	.cart-info {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 2vw;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.cart-icon-wrapper {
		width: 14vw;
		height: 14vw;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		transition: all 0.3s ease;
		flex-shrink: 0;
	}

	.cart-icon-wrapper.empty {
		background: #f0f0f0;
	}

	.cart-icon-wrapper.empty .material-icons {
		font-size: 6vw;
		color: #999;
	}

	.cart-icon-wrapper.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
		animation: pulse 2s infinite;
	}

	.cart-icon-wrapper.active .material-icons {
		font-size: 6vw;
		color: white;
	}

	@keyframes pulse {
		0%, 100% {
			box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
		}
		50% {
			box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5);
		}
	}

	.cart-badge {
		position: absolute;
		top: -2vw;
		right: -2vw;
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
		color: white;
		font-size: 2.5vw;
		font-weight: 700;
		width: 5vw;
		height: 5vw;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid white;
		box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
	}

	.cart-text {
		flex: 1;
	}

	.cart-price {
		font-size: 4.5vw;
		font-weight: 700;
		color: #333;
		margin: 0;
		line-height: 1;
	}

	.cart-tip {
		font-size: 2.8vw;
		color: #999;
		margin: 0.5vw 0 0 0;
		line-height: 1;
	}

	.checkout-btn {
		flex: 1;
		height: 100%;
		border: none;
		background: linear-gradient(135deg, #38CA73 0%, #28a745 100%);
		color: white;
		font-size: 3.5vw;
		font-weight: 700;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		margin: 1vw;
	}

	.checkout-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2px 8px rgba(56, 202, 115, 0.3);
	}

	.checkout-btn.disabled {
		background: linear-gradient(135deg, #bdbdbd 0%, #9e9e9e 100%);
		cursor: not-allowed;
	}

	/* ===== 购物车展开列表 ===== */
	.cart-expanded {
		position: fixed;
		bottom: 16vw;
		left: 0;
		right: 0;
		background: white;
		z-index: 98;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
		border-radius: 16px 16px 0 0;
		max-height: 60vh;
		overflow-y: auto;
	}

	.cart-expanded-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 3vw 4vw;
		border-bottom: 1px solid #f0f0f0;
		background: #f8f9fa;
	}

	.cart-expanded-header h3 {
		font-size: 3.8vw;
		font-weight: 600;
		color: #333;
		margin: 0;
	}

	.close-btn {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.close-btn .material-icons {
		font-size: 4vw;
		color: #999;
	}

	.cart-items-list {
		padding: 2vw 0;
	}

	.cart-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2vw 4vw;
		border-bottom: 1px solid #f5f5f5;
	}

	.item-name {
		flex: 1;
		font-size: 3.2vw;
		color: #333;
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-qty {
		font-size: 3vw;
		color: #999;
		margin: 0 2vw;
		flex-shrink: 0;
	}

	.item-price {
		font-size: 3.2vw;
		font-weight: 600;
		color: #667eea;
		flex-shrink: 0;
	}

	.cart-expanded-footer {
		padding: 3vw 4vw;
		background: #f8f9fa;
		border-top: 1px solid #f0f0f0;
	}

	.total-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.total-row span:first-child {
		font-size: 3.5vw;
		color: #666;
		font-weight: 500;
	}

	.total-price {
		font-size: 4vw;
		font-weight: 700;
		color: #667eea;
	}
</style>
